<!-- saved from url=(0047)https://www.toolnb.com/tools/ImageToBase64.html -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>图片转base64</title>
    <!-- <meta name="Keywords" content="图片转base64,图片文件转base64编码,png转base64">
    <meta name="Description" content="选择一个图片转换为base64字符串、可以让你很方便地在没有上传文件条件下将图片插入其它的网页、编辑器中。"> -->
    <link rel="stylesheet" href="./imageToBase64_files/bootstrap.min.css">
    <link rel="stylesheet" href="./imageToBase64_files/common.css">
    <link rel="stylesheet" href="./imageToBase64_files/jquery-ui.min.css">
    <script charset="utf-8" src="./imageToBase64_files/s.js"></script>
    <script type="text/javascript" async="" src="./imageToBase64_files/analytics.js"></script>
    <script src="./imageToBase64_files/hm.js"></script>
    <script type="text/javascript" src="./imageToBase64_files/jquery.js"></script>
    <script type="text/javascript" src="./imageToBase64_files/bootstrap.js"></script>
    <script type="text/javascript" src="./imageToBase64_files/layer.js"></script>
    <link rel="stylesheet" href="./imageToBase64_files/layer.css" id="layuicss-layer">
    <script type="text/javascript" src="./imageToBase64_files/jquery-ui.js"></script>
    <script type="text/javascript" src="./imageToBase64_files/jquery.form.js"></script>
    <script type="text/javascript" src="./imageToBase64_files/common.js"></script>
    <script src="./imageToBase64_files/userTokenJs.html" type="text/javascript" async="async"></script>
    <link rel="alternate" hreflang="en" href="https://www.toolnb.com/tools-lang-en/ImageToBase64.html">
    <link rel="alternate" hreflang="zh-CN" href="https://www.toolnb.com/tools-lang-zh-CN/ImageToBase64.html">
    <link rel="alternate" hreflang="zh-TW" href="https://www.toolnb.com/tools-lang-zh-TW/ImageToBase64.html">
    <link rel="alternate" hreflang="ja" href="https://www.toolnb.com/tools-lang-ja/ImageToBase64.html">
    <link rel="alternate" hreflang="ko" href="https://www.toolnb.com/tools-lang-ko/ImageToBase64.html">
    <link rel="alternate" hreflang="de" href="https://www.toolnb.com/tools-lang-de/ImageToBase64.html">
    <link rel="alternate" hreflang="ru" href="https://www.toolnb.com/tools-lang-ru/ImageToBase64.html">


    <style>
        html #hm_t_undefined .hm-t-go-top {
            position: fixed;
            right: 2px;
            bottom: 2px;
            z-index: 99998;
            cursor: pointer;
            width: 40px;
            height: 37px!important;
            text-align: center;
            white-space: normal;
            font-size: 14px;
            line-height: 17px;
            padding-top: 3px;
            color: #fff;
            background: #404040;
            background: url() no-repeat -42px center #666;
            *background-image: url(http://ecma.bdimg.com/holmes/t-popup-icons-png8.png);
            _position: absolute;
            _top: expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight||document.body.clientHeight)-this.offsetHeight-2));
        }
    </style>
</head>

<body style="">

    <div class="col-lg-12" style="margin-top: 33px;"></div>
    </div>


    <div class="container">
        <h1>图片转base64</h1>
        <div class="row top10">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active top10" id="home">
                </div>
            </div>
        </div>
        <input type="file" value="sdgsdg" id="demo_input" class="file" style="margin-top: 15px;">
        <textarea id="result" class="form-control" rows="10" style="margin-top: 20px;"></textarea>

        <h3>resolve</h3>
        <textarea id="resolve" class="resolveData" rows="5" style="margin-top: 20px;"></textarea>
        <br>
        <div id="img_area" class="col-lg-6 col-xs-12 top15"></div>
    </div>
    <script>
        window.onload = function() {
            var input = document.getElementById("demo_input");
            var result = document.getElementById("result");
            var img_area = document.getElementById("img_area");
            if (typeof(FileReader) === 'undefined') {
                result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
                input.setAttribute('disabled', 'disabled');
            } else {
                input.addEventListener('change', readFile, false);
            }
        }

        function readFile() {
            var file = this.files[0];
            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
            if (!/image\/\w+/.test(file.type)) {
                alert("请确保文件为图像类型");
                return false;
            }
            let loading = layer.load(1, {
                shade: [0.5, '#fff'] //0.1透明度的白色背景
            });
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                layer.close(loading);
                result.innerHTML = this.result;
                img_area.innerHTML = '<img src="' + this.result + '" alt="" style="width: 100%;"/>';

                this.result.replace("data:image/jpeg;base64,", "")
                console.log(this.result);

                var jsonData = {
                    'images': [this.result.replace("data:image/jpeg;base64,", "")]
                }

                $(".resolveData").css("background", "gray");
                $(".resolveData").val("");

                $.ajax({
                    type: "POST",
                    url: "/api",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function(msg) {
                        $(".resolveData").val(JSON.stringify(msg.results))
                    }
                });


                $(".resolveData").css("background", "white");
            }
        }
    </script>


    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7405f46bed49cf2bf2c82d56bca53945";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script async="" src="./imageToBase64_files/js"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'UA-131433579-1');
    </script>
    <div style="display: none;">
        <script type="text/javascript">
            document.write(unescape("%3Cspan id='cnzz_stat_icon_1276189452'%3E%3C/span%3E%3Cscript src='https://s23.cnzz.com/stat.php%3Fid%3D1276189452' type='text/javascript'%3E%3C/script%3E"));
        </script><span id="cnzz_stat_icon_1276189452"><a href="https://www.cnzz.com/stat/website.php?web_id=1276189452" target="_blank" title="站长统计">站长统计</a></span>
        <script src="./imageToBase64_files/stat.php" type="text/javascript"></script>
        <script src="./imageToBase64_files/core.php" charset="utf-8" type="text/javascript"></script>
    </div>
    <script>
        $("#search").autocomplete({
            source: "/Home/Index/AjaxSearch.html",
            select: function(event, ui) {
                var command = ui.item['value'];
                $.ajax({
                    type: "get",
                    url: "/Home/Index/AjaxTools.html",
                    data: {
                        name: command
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == 1) {
                            window.location = result.data['url'];
                        }
                    }
                });
            }
        });

        $(document).ready(function() {

            $("#top").click(function() {
                $('body,html').animate({
                        scrollTop: 0
                    },
                    1000);
                return false;
            });

        });
    </script>
    <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul>
    <div role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>


    <link href="./imageToBase64_files/style.css" rel="stylesheet" type="text/css">
    <div class="hidden-xs youce-div">
        <ul id="jump">
            <li>
                <a id="reply" href="https://qm.qq.com/cgi-bin/qm/qr?k=l19DO-gLO_10kBpYh8lKeAXO3l9Mb9iz&amp;jump_from=webapi" target="_blank" title="交流/吐槽/学习/反馈" rel="nofollow"></a>
            </li>
            <li>
                <a id="github" href="https://github.com/jackapi/" target="_blank" title="看有啥开源的好东西！" rel="nofollow"></a>
            </li>
            <li>
                <a id="bilibili" href="https://space.bilibili.com/57145232" target="_blank" title="bilibili看工具怎么制作的~" rel="nofollow"></a>
            </li>
            <li>
                <a id="setting" href="javascript:void(0)" onclick="openSetting()" rel="nofollow" title="设置站点背景图"></a>
            </li>
        </ul>
    </div>


</body>

</html>